<template>
  <div class="table-all">
    <!-- 搜索区 -->
    <div class="app-container search-box">
      <SearchForm
        :form="searchData.form"
        :options="searchData.options"
        @searchUpdate="search"
        @resetSearchData="resetSearchData"
        @toLoadMethods="toLoadMethods"
      ></SearchForm>
    </div>
    <!-- 按钮区 -->
    <div class="app-container table-box">
      <div class="table-main">
        <!-- 表格 -->
        <v-table
          title="设施监测设备类型数据"
          v-if="tableMainHeight>0"
          :table-columns="tableColumns"
          :table-data="tableData"
          :loading="loading"
          :is-index="true"
          ref="table"
          :maxHeight="tableMainHeight">
          <template #topButtonList>
            <ButtonForm :buttonList="buttonList" @clickButton="clickButton"></ButtonForm>
          </template>
          <template #facilityTypeId="scope">
            {{getFacilityTypeValue(scope.row.facilityTypeId, facilityType2)}}
          </template>
          <template #operation="scope">
            <a v-hasPermission="['alarmFacilityDeviceType:add']" class="table-btn-edit table-operation"
               @click="handleEdit(scope.row)">{{$t('table.edit')}}</a>
            <a v-hasPermission="['alarmFacilityDeviceType:delete']" class="table-btn-delete table-operation"
               @click="singleDelete(scope.row)">{{$t('table.delete')}}</a>
          </template>
        </v-table>
      </div>
      <div class="table-page">
        <!-- 页码 -->
        <pagination v-show="total>0" :total="total" :page.sync="pageNum" :limit.sync="pageSize"
                    @pagination="search"/>
      </div>
    </div>
    <!-- 详情 -->
    <detailDialog :dialog-visible="detailDialogShow"
                  @success="editSuccess"
                  @close="editClose"
                  :openType="detailOpenType"
                  :id="detailId"
                  :title="detailTitle"
    ></detailDialog>
  </div>
</template>

<script>
import {
  alarmFacilityDeviceTypePage,
  alarmFacilityDeviceTypeExport,
  alarmFacilityDeviceTypeDelete, alarmFacilityTypeList
} from '@/api/alarm/deviceType'
import SearchForm from '@/components/searchForm/index'
import ButtonForm from '@/components/ButtonForm/index'
import VTable from '@/components/VTable/index'
import Pagination from '@/components/Pagination/index'
import detailDialog from './detail.vue'

export default {
  components: {
    VTable, Pagination, detailDialog, SearchForm, ButtonForm
  },
  data() {
    return {
      tableColumns: [
        {
          prop: 'facilityTypeId',
          label: '设施类型',
          minWidth: '150',
          slotname: 'facilityTypeId',
          options: {}
        },
        {
          prop: 'name',
          label: '设备类型',
          minWidth: '150',
          slotname: 'name',
          options: {}
        },
        {
          prop: 'code',
          label: '设备类型编号',
          minWidth: '150',
          slotname: 'code',
          options: {}
        },
        {
          prop: 'remark',
          label: '备注',
          minWidth: '150',
          slotname: 'remark',
          options: {}
        },
        {
          prop: 'createAt',
          label: '创建时间',
          minWidth: '150',
          slotname: 'createAt',
          options: {}
        },
        {
          prop: 'updateAt',
          label: '修改时间',
          minWidth: '150',
          slotname: 'updateAt',
          options: {}
        },
        {
          prop: 'operation',
          label: '操作',
          width: '200',
          align: 'center',
          slotname: 'operation',
          overflow: false,
          fixed: 'right'
        }
      ],
      tableData: [],
      selection: [],
      loading: false,
      total: 1,
      pageNum: 1,
      pageSize: 10,
      detailOpenType: "add",
      detailDialogShow: false,
      detailId: "",
      detailTitle: "新增",
      dict: {},
      searchData: {
        form: {
          facilityTypeId: '',
          name: '',
          code: '',
          createAt: '',
          updateAt: '',
          deleted: '',
          type:'',
        },
        options: [
          {
            title:'设施大类型',
            key: "type",
            type: "select",
            multiple:false,
            event: 'getFacilityType',
            option: {
              data: this.typeOptions,
              props: {
                key: "id", // 指定key对应data的字段
                label: "label", // 指定label对应data的字段
                value: "name", // 指定value对应data的字段
              },
            },
          },
          {
            title: '设施类型',
            key: "facilityTypeId",
            type: "select",
            multiple: false,
            option: {
              data: this.facilityType,
              props: {
                key: "id", // 指定key对应data的字段
                label: "name", // 指定label对应data的字段
                value: "id", // 指定value对应data的字段
              },
            },
          },
          {
            title: '设备类型',
            key: "name",
            type: "text",
          },
          {
            title: '设备类型编号',
            key: "code",
            type: "text",
          },
        ]
      },
      buttonList: [
        {name: '新增', methods: 'handleAdd', type: 'primary', hasPremission:["alarmFacilityDeviceType:add"]},
        // {name: '导入', methods: 'handleImport'},
        {name: '导出数据', methods: 'handleExport', type: 'primary', hasPremission:["alarmFacilityDeviceType:export"]}
      ],
      tableMainHeight: 0,
      // 字典
      facilityType: [],
      facilityType2: [],
      typeOptions: [],
    }
  },
  watch: {
    // 字典
    'facilityType': {
      handler(newVal, oldVal) {
        this.searchData.options.forEach(t => {
          if (t.key == 'facilityTypeId') {
            t.option.data = newVal
          }
        })
      },
      deep: true,
      immediate: true
    },
    // 字典
    'typeOptions':{
      handler(newVal, oldVal) {
        this.searchData.options.forEach(t=>{
          if(t.key=='type'){
            t.option.data = newVal
          }
        })
      },
      deep: true,
      immediate: true
    },
  },
  methods: {
    toLoadMethods(methods) {
      this[methods]()
    },
    getCheckBoxValue(value, option) {
      if (!value) {
        return
      }
      let temp = []
      let data = value.split(",")
      data.forEach(t => {
        let item = option.find(x => x.value == t)
        if (item != undefined) {
          temp.push(item.label)
        }
      })
      return temp.join(",")
    },
    getDictValue(value, option) {
      let item = option.find(t => t.value == value)
      if (item != undefined) {
        return item.label
      }
      return value
    },
    editClose() {
      this.detailDialogShow = false
    },
    editSuccess() {
      this.search()
      this.detailDialogShow = false
    },
    search() {
      this.fetch({
        ...this.searchData.form,
      })
    },
    fetch(params = {}) {
      params.pageSize = this.pageSize
      params.pageNum = this.pageNum
      this.loading = true
      alarmFacilityDeviceTypePage(params).then(res => {
        if (res.code == 200) {
          this.total = res.data.total
          this.tableData = res.data.rows
        } else {
          this.$message({
            message: this.$t('tips.systemException'),
            type: 'error'
          })
        }
      }).finally(final => {
        this.loading = false
      })
      // this.getFacilityType();
    },
    // 重置搜索条件
    resetSearchData() {
      this.searchData.form = {
        facilityTypeId: '',
        name: '',
        code: '',
        createAt: '',
        updateAt: '',
        deleted: '',
      }
    },

    // 触发按钮区域按钮方法
    clickButton(methods) {
      this[methods]()
    },
    handleAdd() {
      this.detailOpenType = "add"
      this.detailTitle = "新增"
      this.detailDialogShow = true
    },
    handleEdit(row) {
      this.detailId = row.id
      this.detailOpenType = "edit"
      this.detailTitle = "编辑"
      this.detailDialogShow = true
    },
    handleExport() {
      let params = {
        ...this.searchData.form
      }
      alarmFacilityDeviceTypeExport(params, `设施监测设备类型_${new Date().getTime()}.xlsx`);
    },
    handleImport() {
      console.log("等待处理")
    },
    closeDialog() {
      this.detailDialogShow = false
    },

    singleDelete(row) {
      this.$confirm(this.$t('tips.confirmDelete'), this.$t('common.tips'), {
        confirmButtonText: this.$t('common.confirm'),
        cancelButtonText: this.$t('common.cancel'),
        type: 'warning'
      }).then(() => {
        this.loading = true
        alarmFacilityDeviceTypeDelete(row.id).then(res => {
          if (res.code == 200) {
            this.$message({
              message: this.$t('tips.deleteSuccess'),
              type: 'success'
            })
            this.search()
          } else {
            this.$message({
              message: this.$t('tips.systemException'),
              type: 'error'
            })
          }
        }).finally(final => {
          this.loading = false
        })
      })
    },
    getFacilityType() {
      this.searchData.form.facilityTypeId = ""
      this.facilityType = []
     let params = {}
     params.type =  this.searchData.form.type
     console.log("params====>",params)
      alarmFacilityTypeList(params).then(res => {
        if (res.code == 200) {
          this.facilityType = res.data
        } else {
          this.$message({
            message: this.$t('tips.systemException'),
            type: 'error'
          })
        }
      })
    },
    getFacilityTypeValue(id,option){
      let item = option.find(t=> t.id == id)
      if(item!=undefined){
        return item.name
      }
      return id
    },
  },
  activated() {
    this.fetch()
  },
  created() {
    // 获取字典值
    this.typeOptions = []
    this.$commonJs.filterDataDict("alarmFacilityType", this.typeOptions)
    // this.getFacilityType();
    alarmFacilityTypeList().then(res => {
      if (res.code == 200) {
        this.facilityType2 = res.data
      } else {
        this.$message({
          message: this.$t('tips.systemException'),
          type: 'error'
        })
      }
    })
  },
  mounted() {
    this.tableMainHeight = document.getElementsByClassName('table-main')[0].clientHeight - 44 //减去顶部按钮列表的高度
  }
}
</script>

<style lang="scss" scoped>
.table-all {
  display: flex;
  flex-direction: column;
  height: 100%;

  .search-box {
    padding-bottom: 6px;
  }

  .table-box {
    padding-top: 10px;
    flex: 1;
    display: flex;
    flex-direction: column;

    .table-main {
      flex: 1;
      overflow: auto;
    }

    .table-page {
      // padding-top: 10 px;
      // padding-bottom: 10 px;
    }

    ::v-deep .pagination-container {
      text-align: right;
    }

  }
}
</style>
